<template>
  <div id="library" class="bg-white">
    <van-tabs v-model="active" sticky animated swipeable color="#2E79FF">
      <van-tab v-for="(item,index) in tabs" :key="`${index}tab页`" :title="item.name" v-if="index <= 2">
        <van-pull-refresh v-model="isLoading" @refresh="showList(item.data, item.page, item.type, item.finished, true, false)">
          <img
            slot="loading"
            class="loading-gif-refresh"
            src="../../assets/loading.gif"
          >
          <template v-if="getDataFiled(item.data) == 0">
            <div class="no-data-img">
              <img src="../../assets/meeting/no-data.png">
              <p>暂无相关图书</p>
            </div>
          </template>
          <van-list
            v-else
            v-model="loading"
            :finished="getDataFiled(item.finished)"
            finished-text="没有更多了"
            :immediate-check="false"
            @load="showList(item.data, item.page, item.type, item.finished, false, false)"
          >
            <van-row class="row">
              <van-col span="7" class="position" v-for="(detail, index) in getDataFiled(item.data)" :key="`${index}detail`" @click="toDetail(item.type, detail)">
                <van-image width="101" height="142" :src="`${$common.filePath}${detail.img}`"
                radius="4px"/>
                <!-- 图书管理 -->
                <template v-if="item.type == 'list' && (detail.type == '1' || detail.type == '3')">
                  <van-tag class="book-tag" type="danger" size="medium">已借出</van-tag>
                </template>
                <!-- 已借阅图书 -->
                <template v-if="item.type == 'borrowed' && detail.type == '1'">
                  <van-tag class="book-tag" type="danger" size="medium">待审</van-tag>
                </template>
                <template v-if="item.type == 'borrowed' && detail.type == '2'">
                  <van-tag class="book-tag" type="warning" size="medium">未通过</van-tag>
                </template>
                <template v-if="item.type == 'borrowed' && detail.type == '3'">
                  <van-tag class="book-tag" type="primary" size="medium">借阅中</van-tag>
                </template>
                <!-- 借阅审批 -->
                <template v-if="item.type == 'approval_list' && detail.type == '1'">
                  <van-tag class="book-tag" type="danger" size="medium">待审</van-tag>
                </template>
                <template v-if="item.type == 'approval_list' && detail.type == '3'">
                  <van-tag class="book-tag" type="primary" size="medium">审阅中</van-tag>
                </template>
                <p class="van-ellipsis book-name">{{ detail.bookname }}</p>
                <p class="van-ellipsis book-author">{{ detail.author }}</p>
              </van-col>
            </van-row>
          </van-list>
        </van-pull-refresh>
      </van-tab>
      <van-tab v-for="(item,index) in tabs" :key="`${index}last`" v-if="index == 3" :title="item.name">
        <van-pull-refresh v-model="isLoading" @refresh="showList(item.data, item.page, item.type, item.finished, true, false)">
          <img
            slot="loading"
            class="loading-gif-refresh"
            src="../../assets/loading.gif"
          >
          <template v-if="getDataFiled(item.data) == 0">
            <div class="no-data-img">
              <img src="../../assets/meeting/no-data.png">
              <p>暂无相关图书</p>
            </div>
          </template>
          <van-list
            v-else
            v-model="loading"
            :finished="getDataFiled(item.finished)"
            finished-text="没有更多了"
            :immediate-check="false"
            @load="showList(item.data, item.page, item.type, item.finished, false, false)"
          >
          <van-card v-for="(last,index) in getDataFiled(item.data)" :key="index+'last'"
          @click="toJournal(last.id)">
            <div slot="thumb">
              <van-image width="70" height="96" radius="4px" :src="`${$common.filePath}${last.pic}`" />
            </div>
            <div slot="title">
              <p class="title-class van-multi-ellipsis--l2">{{ last.subject }}</p>
            </div>
            <div slot="desc">
              <p class="desc-info">{{ last.name }}</p>
              <p class="desc-info">{{ last.date }}</p>
            </div>
          </van-card>
        </van-list>
        </van-pull-refresh>
      </van-tab>
    </van-tabs>
  </div>
</template>
<script type="text/javascript">
  export default{
    data() {
      return{
        active:0,
        isLoading: false,
        loading: false,
        finished: false,

        tabs:[{
          name:'图书管理',
          data:'bookList',
          page:'bookPage',
          type:'list',
          finished:"bookfinished"
        },{
          name:'已借阅',
          data:"borrowedList",
          page:'borrowedPage',
          type:"borrowed",
          finished:"borrowedfinished"
        },{
          name:'借阅审批',
          data:'approvalList',
          page:"approvalPage",
          type:"approval_list",
          finished:'approvalfinished'
        },{
          name:'电子期刊',
          data:'journalList',
          page:'journalPage',
          type:'journals',
          finished:'journalfinished'
        }],

        bookList:[],
        bookPage:1,
        bookfinished:false,

        borrowedList:[],
        borrowedPage:1,
        borrowedfinished:false,

        approvalList:[],
        approvalPage:1,
        approvalfinished:false,

        journalList:[],
        journalPage:1,
        journalfinished:false
      }
    },
    activated() {
      /*this.active= 0
      this.isLoading= false
      this.loading= false
      this.finished= false
      this.bookList= []
      this.bookPage= 1
      this.bookfinished= false

      this.borrowedList= []
      this.borrowedPage= 1
      this.borrowedfinished= false

      this.approvalList= []
      this.approvalPage= 1
      this.approvalfinished= false

      this.journalList= []
      this.journalPage= 1
      this.journalfinished= false*/
      
      this.$bridge.callHandler('navTitle', {title: '图书管理'})
      setTimeout(() => {
        this.$bridge.registerHandler('navBackClicked', (data,responseCallback) => {
          responseCallback('h5 done!')
        })
      },500)
      this.showList("bookList", "bookPage", "list", "bookfinished", true, true)
      this.showList("borrowedList", "borrowedPage", "borrowed", "borrowedfinished", true, true)
      this.showList("approvalList", "approvalPage", "approval_list", "approvalfinished", true, true)
      this.showList("journalList", "journalPage", "journals", "journalfinished", true, true)
    },
    methods:{
      getDataFiled(dataFiled) {
        return this[dataFiled]
      },
      /**
       * [showList description]
       * @return {[type]} [description]
       */
      showList(target, page, type, finished, init, showToast) {
        let self = this
        self.loading = true
        if(init) {
          self[page] = 1
          self[finished] = false
        }
        let config = {
          method: "post",
          url: `${self.$common.basePath}book/book_manage.php`,
          data: {
            do: type,
            page: self[page]++,
            user_id: self.$store.state.userId,
            number:'',//编号，没有传空字符串，以下相同
            title:'',
            filetype:'',
            vstartdate:'',
            venddate:'',
          }
        }
        if(showToast) {
          self.$toast({
            duration: 0,
            forbidClick: true,
            className: 'loading-toast',
            icon: require('../../assets/loading.gif'),
          })
        }
        if(!self[finished] || init) {
          self.loading = false
          self.$axios(config).then(res => {
            self[target] = init?res.data.list : self[target].concat(res.data.list)
            if(self[target].length >= res.data.total) {
              self[finished] = true
            }
            self.isLoading = false
            self.$toast.clear()
          }).catch(err => {
            self.$toast.clear()
            self.loading = false
            self[finished] = true

          })
        }
      },
      /**
       * 期刊详情
       * @return {[type]} [description]
       */
      toJournal(id) {
        this.$router.push({ name:'journalDetail', query:{ jid:id }})
      },
      /**
       * 详情
       * @param  {[type]} status [当前tab类型]
       * @param  {[type]} id     [id]
       * @return {[type]}        [description]
       */
      toDetail(status, detail) {
        if(status == 'list'){
          this.$router.push({ name:'libraryDetail',query:{ status:status, id:detail.id, type:detail.type} })
        }else if(status == 'borrowed') {
          this.$router.push({ name:'libraryDetail',query:{ status:status, id:detail.bookid, type:detail.type} })
        }else if(status == "approval_list") {
          this.$router.push({ name:'libraryDetail',query:{ status:status, id:detail.bookid, type:detail.type, listId:detail.id} })
        }
      }
    }
  }
</script>
<style type="text/css" lang="less" scoped>
  .bg-white{
    background-color: #fff;
    min-height: 100vh;
    -webkit-overflow-scrolling: touch;
  }
  .row{
    margin: 15px 0px 20px 0px;

    .van-col{
      margin-left: 15px;
      margin-bottom: 20px;
    }
  }
  .position{
    position: relative;
  } 
  .book-name{
    min-height: 19px;
    margin: 10px 0 5px 0;
    color: #333333;
    font-size: 14px;
    font-weight: bold;
  }
  .book-author{
    min-height: 17px;
    margin: 0;
    color: #999999;
    font-size: 13px;
  }
  .book-tag{
    position: absolute;
    top: 116px;
    left: 5px;
  }
  .title-class{
    min-height: 44px;
    color: #333333;
    font-size: 17px;
    font-weight: bold;
    margin: 0;
  }
  .desc-info{
    color: #999999;
    font-size: 14px;
    margin: 7px 0;
  }
  .no-data-img{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 40% 0 ;
    background-color: #fff;
    // height: 100vh;

    img{
      width: 180px;
      height: 106px;
      text-align: center;
    }

    p{
      font-size: 17px;
      color: #333333
    }
  }
</style>
<style type="text/css" lang="less">
  #library{
    .van-col--7{
      width: 28.36%;
    }
    .van-tab span{
      font-size: 14px;
    }
    .van-tabs__line{
      width: calc(100vw/4 - 30px)!important;
    }
    .van-hairline--top-bottom::after, .van-hairline-unset--top-bottom::after{
      border-width: 0;
    }
    .van-card{
      padding: 0px 16px;
      background-color: #fff;
    }
    .van-card__thumb{
      width: auto;
      height: auto;
      margin-right: 15px;
    }
    .van-card__header{
      padding-top: 10px;
      padding-bottom: 13px;
      border-bottom: 1px solid #F5F5F5;
    }
  }
</style>